<template>
  <view
    class="
      register
      bg-white
      min-h-full
      flex flex-col
      items-center
      px-[40rpx]
      pt-[100rpx]
      box-border
    "
  >
    <view class="w-full">
      <view class="text-2xl font-medium mb-[60rpx]">忘记登录密码</view>
      <u-form borderBottom :label-width="150">
        <u-form-item label="手机号" borderBottom>
          <u-input
            class="flex-1"
            v-model="formData.mobile"
            :border="false"
            placeholder="请输入手机号码"
          />
        </u-form-item>
        <u-form-item label="验证码" borderBottom>
          <u-input
            class="flex-1"
            v-model="formData.code"
            placeholder="请输入验证码"
            :border="false"
          />
          <view
            class="
              border-l border-solid border-0 border-light
              pl-3
              text-muted
              leading-4
              ml-3
              w-[180rpx]
            "
            @click="sendSms"
          >
            <u-verification-code
              ref="uCodeRef"
              :seconds="60"
              @change="codeChange"
              change-text="x秒"
            />
            <text :class="formData.mobile ? 'text-primary' : 'text-muted'">
              {{ codeTips }}
            </text>
          </view>
        </u-form-item>
        <u-form-item label="新密码" borderBottom>
          <u-input
            class="flex-1"
            type="password"
            v-model="formData.password"
            placeholder="6-20位数字+字母或符号组合"
            :border="false"
          />
        </u-form-item>
        <u-form-item label="确认密码" borderBottom>
          <u-input
            class="flex-1"
            type="password"
            v-model="formData.password_confirm"
            placeholder="再次输入新密码"
            :border="false"
          />
        </u-form-item>
      </u-form>
      <view class="mt-[100rpx]">
        <u-button type="primary" shape="circle" @click="handleConfirm">
          确定
        </u-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { smsSend } from "@/api/app";
import { forgotPassword } from "@/api/account";
import { SMSEnum } from "@/enums/appEnums";
import { reactive, ref, shallowRef } from "vue";

const uCodeRef = shallowRef();
const codeTips = ref("");
const formData = reactive({
  mobile: "",
  code: "",
  password: "",
  password_confirm: "",
});

const codeChange = (text: string) => {
  codeTips.value = text;
};

const sendSms = async () => {
  if (!formData.mobile) return;
  if (uCodeRef.value?.canGetCode) {
    await smsSend({
      scene: SMSEnum.FIND_PASSWORD,
      mobile: formData.mobile,
    });
    uni.$u.toast("发送成功");
    uCodeRef.value?.start();
  }
};

const handleConfirm = async () => {
  if (!formData.mobile) return uni.$u.toast("请输入手机号码");
  if (!formData.password) return uni.$u.toast("请输入密码");
  if (!formData.password_confirm) return uni.$u.toast("请输入确认密码");
  if (formData.password != formData.password_confirm)
    return uni.$u.toast("两次输入的密码不一致");
  await forgotPassword(formData);
  uni.navigateBack();
};
</script>

<style lang="scss">
page {
  height: 100%;
}
</style>
